<template>
  <div class="home-musiclist">
    <div class="home-musiclist-biaoqian">
      <div class="left">发现好歌单</div>
      <div class="right">更多歌单</div>
    </div>
    <div class="home-musiclist-zheng">
      <van-swipe :loop="false" :width="100" :show-indicators="false">
        <!-- <van-swipe-item>
                    <img src={{songsheet.picUrl}} />
                    <span>{{ songsheet.name }}</span>
                </van-swipe-item> -->
        <van-swipe-item v-for="songsheet in songsheets" :key="songsheet">
          <RouterLink :to="{ path: '/itemmusic', query: { id: songsheet.id } }">
            <img class="musiclist-img" :src="songsheet.picUrl" />
            <span class="musiclist-span">{{ songsheet.name }}</span>
            <div class="musiclist-div">
              <span class="iconfont" style="line-height: 0rem; padding: 0rem 0rem">&#xe7f9;</span>
              <span>{{ songss(songsheet.playCount) }}</span>
            </div>
          </RouterLink>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { songsheet } from "../../api/user";

export default {
  data() {
    return {
      songsheets: [], //好歌单数据
      //songs: []
    };
  },
  momputed: {
    // songs() {
    //     for (let i = 0; i < this.songs.length; i++) {
    //         if (this.songs[i].playCount > 100000000) {
    //             let num = this.songs[i].playCount / 100000000
    //             this.songs[i].playCount = num + "亿"
    //         } else if (this.songs[i].playCount > 10000) {
    //             let num = this.songs[i].playCount / 10000
    //             this.songs[i].playCount = num + "万"
    //         } else { }
    //     }
    //     console.log(this.songs)
    //return songs
    //}
  },
  methods: {
    //获取好歌单数据
    song() {
      songsheet()
        .then((res) => {
          this.songsheets = res.data.result;
          //console.log(res)
        })
        .catch();
    },
    // songs() {
    //     for (let i = 0; i < this.songsheets.length; i++) {
    //         if (this.songsheets[i].playCount > 100000000) {
    //             let num = this.songsheets[i].playCount / 100000000
    //             this.songsheets[i].playCount = num + "亿"
    //         } else if (this.songsheets[i].playCount > 10000) {
    //             let num = this.songsheets[i].playCount / 10000
    //             this.songsheets[i].playCount = num + "万"
    //         } else { }
    //     }
    //     console.log(this.songsheets)
    // }

    songss(num) {
      if (num > 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
      } else if (num > 10000) {
        return (num / 10000).toFixed(1) + "万";
      } else {
        return num;
      }
    },
  },
  mounted() {
    this.song();
  },
};
</script>

<style lang="less" scoped>
.home-musiclist {
  .home-musiclist-biaoqian {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.3rem;

    .left {
      font-size: 0.4rem;
      font-weight: bold;
    }

    .right {
      width: 1rem;
      border: solid 1px #000;
      border-radius: 0.3rem;
      font-size: 0.2rem;
      line-height: 0.5rem;
    }
  }

  .home-musiclist-zheng {
    width: 100%;
    height: 3rem;
    padding: 0rem 0.3rem;
    box-sizing: border-box;

    .van-swipe {
      //width: 2rem;
      height: 3rem;

      //background-color: aqua;
      .van-swipe-item {
        text-align: center;
        position: relative;

        .musiclist-span {
          width: 1.8rem;
          height: 1rem;
          font-size: 0.04rem;
          display: block;
          padding: 0rem 0.1rem;
          flex: right;
          color: #000;
        }

        .musiclist-div {
          height: 0.5rem;
          font-size: 0.04rem;
          position: absolute;
          left: 0.5rem;
          top: 0rem;
          display: inline;
          color: pink;
        }

        .musiclist-img {
          width: 1.5rem;
          height: 2rem;
          border-radius: 0.1rem;
          color: #000;
        }
      }
    }
  }
}
</style>
